<!--
    @ author:小恶魔
    @ datetime: 2020-7-26
 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>逆丰会员</title>
    <link rel="stylesheet" href="/static/logistics/css/bootstrap4.5.css">
    <link rel="stylesheet" href="/static/admin/lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/static/logistics/css/city-picker.css">
    <link rel="stylesheet" href="/static/logistics/css/main.css">
    <link rel="stylesheet" href="/static/logistics/css/toast.css">
    <style>
        .checkbox-custom {
            position: relative;
            padding: 0 15px 0 25px;
            margin-bottom: 7px;
            margin-top: 0;
            display: inline-block;
        }
        /*
        将初始的checkbox的样式改变
        */
        .checkbox-custom input[type="checkbox"] {
            opacity: 0;/*将初始的checkbox隐藏起来*/
            position: absolute;
            cursor: pointer;
            z-index: 2;
            margin: -6px 0 0 0;
            top: 50%;
            left: 3px;
        }
        /*
        设计新的checkbox，位置
        */
        .checkbox-custom label:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -9px;
            width: 19px;
            height: 18px;
            display: inline-block;
            border-radius: 2px;
            border: 1px solid #bbb;
            background: #fff;
        }
        /*
        点击初始的checkbox，将新的checkbox关联起来
        */
        .checkbox-custom input[type="checkbox"]:checked +label:after {
            position: absolute;
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            content: "✔";
            top: 42%;
            left: 3px;
            margin-top: -5px;
            font-size: 11px;
            line-height: 1;
            width: 16px;
            height: 16px;
            color: #333;
        }
        .checkbox-custom label {
            cursor: pointer;
            line-height: 1.2;
            font-weight: normal;/*改变了rememberme的字体*/
            margin-bottom: 0;
            text-align: left;
        }
    </style>
</head>
<body>
<!-- 头部文件 -->
<div th:replace="~{/logistics/header::html}"></div>
<div class="bg-light" id="homeApp">
    <div class="container">
        <div class="row">
            <div class="col-sm-12" style="margin-top: 20px">

                <div class="row" style="background-color: white;padding-top: 10px;padding-bottom: 5px">
                    <div class="col-sm-3">

                        <div class="card m-auto" style="width: 18rem;height: 206px;border: 0px;" >
                            <div style="width: 20%;margin:20px auto 0">
                                <img th:src="${session.CUSTOMER.faceImage}" class="card-img-top" alt="..." style="border-radius:100%; ">
                            </div>

                            <div class="card-body text-center">

                                <h5 class="card-title" th:text="'余额：'+${session.CUSTOMER.customerMoney}">余额：10</h5>
                                <p class="card-text">
                                    <a href="/">

                                        <span class="text-warning" th:text="'积分：'+${session.CUSTOMER.integral}"></span>
                                    </a>
                                </p>
                                <a href="#" class="btn btn-sm btn-outline-warning">积分兑换</a>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-9">
                        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img src="/static/logistics/home/img/slide1.jpg" class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img src="/static/logistics/home/img/slide2.jpg" class="d-block w-100" alt="...">
                                </div>
                            </div>
                            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="row" style="margin-top: 15px">

                    <div class="col-sm-6 rounded" style="background-color: white;padding: 10px 10px 10px 10px;">

                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="请输入运单号点击查询" aria-label="Recipient's username" aria-describedby="button-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-success" type="button" id="button-addon2">查询</button>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-5 offset-md-1 rounded text-center" style="background-color: white;padding: 15px 10px 10px 10px;">


                        <a href="http://wpa.qq.com/msgrd?v=3&uin=1551282386&site=qq&menu=yes" target="_blank" class="text-warning" style="margin-right: 20px;">
                            <img src="/static/logistics/home/img/service.png">
                            <span>在线客服</span>
                        </a>
                        <a href="javascript:void (0);" class="text-warning" style="margin-right: 20px;">
                            <img src="/static/logistics/home/img/gps.png">
                            <span>网点查询</span>
                        </a>

                        <a href="javascript:void (0);" class="text-warning">
                            <img src="/static/logistics/home/img/count.png">
                            <span>运费计算</span>
                        </a>


                    </div>

                </div>
                <div class="row rounded" style="background-color: white;margin-top:15px;padding: 10px 10px 10px 10px;">

                    <!-- 寄件信息 -->
                    <div class="col-sm-12 shadow p-3 mb-5 bg-white rounded">

                        <div class="card" style="border:none;">
                            <div class="card-header" style="background-color:rgba(0,0,0,0);border:none;">
                                <img src="/static/logistics/home/img/jijian.png" width="140" height="50">

                                <div class="badge badge-primary text-wrap" style="width: 7rem;">
                                    标*为必填项
                                </div>

                            </div>
                            <div class="card-body">
                                    <div class="form-group row">
                                        <label for="colFormLabel" class="col-sm-2 col-form-label text-secondary"><span class="text-danger">*</span>姓名</label>
                                        <div class="col-sm-7">

                                            <input id="colFormLabel" name="username" type="text" class="form-control" :class="sendInfo.nameCss" placeholder="请输入寄件人姓名" v-model="sendInfo.name">
                                            <div class="invalid-feedback">
                                                {{sendInfo.verifyNameMsg}}
                                            </div>
                                        </div>

                                        <a href="#" class="btn btn-outline-warning mr-1" data-toggle="modal" data-target="#mailAddressModel" @click="isSendAddressOrPutAddress(true)">
                                            <img src="/static/logistics/home/img/address.png" width="24">地址簿
                                        </a>
                                        <a href="#" class="btn btn-outline-warning" data-toggle="modal" data-target="#aiFillIn" @click="isSendAddressOrPutAddress(true)">
                                            <img src="/static/logistics/home/img/text.png" width="24">智能填写
                                        </a>
                                    </div>
                                    <div class="form-group row">
                                        <label for="colFormLabel2" class="col-sm-2 col-form-label text-secondary"><span class="text-danger">*</span>联系方式</label>
                                        <div class="col-sm-7">
                                            <input type="text" class="form-control" :class="sendInfo.phoneCss" v-model="sendInfo.phone" id="colFormLabel2" placeholder="手机号/固话">
                                            <div class="invalid-feedback">
                                                {{sendInfo.verifyPhoneMsg}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class=" row">
                                        <label class="col-sm-2 col-form-label text-secondary"><span class="text-danger">*</span>所属区域</label>
                                        <div class="col-sm-7">


                                            <div class="form-group">
                                                <div style="position: relative;">
                                                    <input id="city-picker1" class="form-control" readonly type="text" placeholder="请输入所属区域">
                                                </div>
                                            </div>


                                        </div>

                                    </div>
                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label text-secondary"><span class="text-danger">*</span>详细地址</label>
                                        <div class="col-sm-7">
                                            <input type="text" v-model="sendInfo.detailAddress" :class="sendInfo.detailAddrCss" class="form-control" placeholder="请输入详细地址">
                                            <div class="invalid-feedback">
                                                {{sendInfo.verifyDetailAddress}}
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>

                    </div>
                    <!-- 收件信息 -->
                    <div class="col-sm-12 shadow p-3 mb-5 bg-white rounded" >

                        <div class="card" style="border:none;">
                            <div class="card-header" style="background-color:rgba(0,0,0,0);border:none;">
                                <img src="/static/logistics/home/img/shoujian.png" width="140" height="50">

                                <div class="badge badge-primary text-wrap" style="width: 7rem;">
                                    标*为必填项
                                </div>

                            </div>
                            <div class="card-body">
                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label text-secondary"><span class="text-danger">*</span>姓名</label>
                                        <div class="col-sm-7">
                                            <input type="text" v-model="putInfo.name" class="form-control" :class="putInfo.nameCss" placeholder="请输入收件人姓名">
                                            <div class="invalid-feedback">
                                                {{putInfo.verifyDetailAddress}}
                                            </div>
                                        </div>
                                        <a href="#" class="btn btn-outline-warning mr-1" data-toggle="modal" data-target="#mailAddressModel" @click="isSendAddressOrPutAddress(false)">
                                            <img src="/static/logistics/home/img/address.png" width="24">地址簿
                                        </a>
                                        <a href="#" class="btn btn-outline-warning" @click="isSendAddressOrPutAddress(false)" data-toggle="modal" data-target="#aiFillIn">
                                            <img src="/static/logistics/home/img/text.png" width="24" />智能填写
                                        </a>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label text-secondary"><span class="text-danger">*</span>联系方式</label>
                                        <div class="col-sm-7">
                                            <input type="text" v-model="putInfo.phone" :class="putInfo.phoneCss" class="form-control" placeholder="手机号/固话">
                                            <div class="invalid-feedback">
                                                {{putInfo.verifyPhoneMsg}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-sm-2 col-form-label text-secondary"><span class="text-danger">*</span>所属区域</label>
                                        <div class="col-sm-7">

                                            <div class="form-group">

                                            <div style="position: relative;">
                                                <input id="city-picker3" class="form-control"
                                                       readonly type="text" placeholder="请输入所属区域" data-toggle="city-picker">
                                            </div>
                                            </div>


                                        </div>

                                    </div>
                                    <div class="form-group row">
                                        <label for="colFormLabel3" class="col-sm-2 col-form-label text-secondary"><span class="text-danger">*</span>详细地址</label>
                                        <div class="col-sm-7">
                                            <input type="text" class="form-control" :class="putInfo.detailAddrCss" v-model="putInfo.detailAddress" id="colFormLabel3" placeholder="请输入详细地址">
                                            <div class="invalid-feedback">
                                                {{putInfo.verifyDetailAddress}}
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>

                        <!-- 分割 其他信息 -->
                        <hr />

                        <div class="card" style="border:none;">
                            <div class="card-header" style="background-color:rgba(0,0,0,0);border:none;">
                                <img src="/static/logistics/home/img/other.png" width="140" height="50">

                            </div>
                            <div class="card-body">

                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label>物品类型</label>
                                        <select class="form-control">

                                            <option v-for="good in goodsType" :value="good.goodsId">{{good.goodsName}}</option>

                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>抵用卷</label>
                                        <select class="form-control" v-model="couponId">

                                            <option v-for="coupon in coupons" :value="coupon.id">{{coupon.name}}</option>

                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>特殊备注</label>
                                        <select class="form-control" v-model="remark">
                                            <option selected>需要纸箱</option>
                                            <option value="需要爬楼">需要爬楼</option>
                                            <option value="缺文件袋">缺文件袋</option>
                                            <option value="需要胶带">需要胶带</option>
                                            <option value="上门前联系">上门前联系</option>
                                            <option value="贵品保价">贵品保价</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>物品重量</label>
                                        <select class="form-control">
                                            <option selected>1KG</option>
                                            <option>2KG</option>
                                            <option>3KG</option>
                                            <option>其他</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>物品重量</label>
                                        <select class="form-control" v-model="makeCargoMethod">
                                            <option selected value="0">上门取货</option>
                                            <option selected value="1">送货上门</option>
                                        </select>
                                    </div>

                                </div>

                            </div>
                        </div>



                    </div>
                    <div class="m-auto">
                        <div id="submitMessage" class="alert alert-danger alert-dismissible d-none" role="alert">
                            提交失败呢，请查看哪里还未填写呢！
                        </div>
                        <div class="checkbox-custom checkbox-default">
                            <input type="checkbox" id="RememberMe" checked>
                            <label for="RememberMe">我同意</label>
                        </div>
                        <a href="javascript:void(0);" class="text-warning" data-toggle="modal" data-target="#exampleModal">《全国快递协议》</a>
                        <button type="submit" class="btn btn-primary btn-lg btn-block" @click="orderSubmit">提交</button>

                    </div>

                </div>

            </div>

        </div>
    </div>

    <!-- 地址簿 -->
    <div class="modal fade" id="mailAddressModel" tabindex="-1" role="dialog" aria-labelledby="mailAddressModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mailAddressModalLabel">地址簿</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col-sm-12">

                            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#staticBackdrop">
                                新增地址
                            </button>
                        </div>

                        <div class="col-sm-12 mt-3">

                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th scope="col">姓名</th>
                                    <th scope="col">手机</th>
                                    <th scope="col">详细地址</th>
                                    <th scope="col">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(address, index) in addressList">
                                    <th scope="row">{{address.name}}</th>
                                    <td>{{address.tel}}</td>
                                    <td>{{address.area}}-{{address.detailedAddress}}</td>
                                    <td>
                                        <button type="button" class="btn btn-primary btn-sm" @click="valueAddressInfo(index)">选择</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <!-- 分页 -->
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item">
                                        <a class="page-link" href="#" aria-label="Previous">
                                            <span class="text-warning" aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li class="page-item " v-for="index of pageUtil.pageCount" @click="addressPage(index)"><a class="page-link text-warning" href="javascript:void(0);">{{index}}</a></li>
                                    <li class="page-item ">
                                        <a class="page-link" href="#" aria-label="Next">
                                            <span class="text-warning" aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- 智能填写模态框 -->
    <div class="modal fade" id="aiFillIn" tabindex="-1" role="dialog" aria-labelledby="aiFillInModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="aiFillInModalLabel">智能填写
                        <span class="text-secondary ml-2" style="font-size: 15px;">粘贴或输入整段姓名、电话和地址，自动识别填充</span>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col-sm-12 p-3">
                            <textarea v-model="parseAddressText" class="form-control" rows="4" placeholder="如:张三,XX省XX市XX街道，15512823865"></textarea>

                            <div v-if="addressMessage" class="alert alert-warning alert-dismissible mt-2">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <strong>错误!</strong> 请输入正确的格式。
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer m-auto">
                    <button type="button" class="btn btn-warning" @click="parseAddress">智能解析</button>
                </div>
            </div>
        </div>
    </div>



</div>

<!-- 快递协议模态框 -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">国内快递服务协议</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <b>
                    特别声明：本公司依据快件的重量（而非价值）收取基本运费，赔偿标准是按照是否保价原则为基础。依公平原则，本公司对单票快件的保价价值限定为3万元人民币。否则，寄件人需拆分至单票3万元以下分别寄件，并进行保价；如因所寄递的快件性质无法拆分，请寄件人采取其他运输方式以保障安全。
                </b>

                <ol data-v-56ac478c=""><li data-v-56ac478c="">快递详单是本协议的组成部分。本协议自寄件人将快件交付给快递服务组织揽件人员并签字或盖章后成立。</li><br data-v-56ac478c=""> <li data-v-56ac478c="">本协议项下快递服务组织是指取得“圆通”商标使用权，并具备圆通网络经营权的快递营业机构。</li><br data-v-56ac478c=""> <li data-v-56ac478c="">快递服务组织依法收寄快件，对信件以外的快件按照国家有关规定应当场验视，对禁寄物品和拒绝验视的物品不予收寄。向寄件人提供自寄件之日起，一年的查询服务。</li><br data-v-56ac478c=""> <li data-v-56ac478c="">寄件人要准确填写寄件信息，不得交寄有爆炸性、易燃性、腐蚀性、放射性、毒性的危险品、麻醉药品、生化制品、现金以及国家法律、法规禁止寄递的物品。不得隐瞒交寄快件的内件状况，配合快递服务组织验视快件。需要的情况下寄件人应当依照国家规定出示相关部门的安全证明和有效证件。如快件内物品属于禁寄物品，快递服务组织有权根据相关法律法规规定处理。寄件人匿报、隐蔽交寄禁寄和航空限寄物品导致快件服务组织或第三人人身或财产伤害的，寄件人应当向快件服务组织或第三人承担赔偿责任。</li><br data-v-56ac478c=""> <li data-v-56ac478c="">快件服务组织在服务过程中造成快件短少、毁损、灭失的，应当承担赔偿责任。寄件人违规交寄或填单有误，造成快件延误、无法送达、无法退还，或因封装不善造成快件延误、毁损、灭失的，由寄件人承担责任。快件服务组织有偿代为封装的，承担因封装不善造成的延误、毁损、灭失的责任。</li><br data-v-56ac478c=""> <li data-v-56ac478c="">如地址不正确、联系方式错误、收件人拒收等原因而造成无法派送的快件，若寄件人要求退回的，双程费用均由寄件人承担。</li><br data-v-56ac478c=""> <li data-v-56ac478c="">为保证快件安全送达，寄件人办理寄件时须如实申报快件内容和价值，并准确、清楚的填写寄件人、收件人的名称、地址和联系电话等资料。</li><br data-v-56ac478c=""> <li data-v-56ac478c="">寄件人可以与快递服务组织约定送达时间，没有约定的按照《快递服务》国家标准GB/T27917的规定。快递服务组织将快件送达收件人地址，经收件人或收件人（寄件人）允许的代收人签字，视为送达。若无收件人姓名，仅有收货单位地址，，则由单位收件人员签字，或盖单位收发章，视为送达。</li><br data-v-56ac478c=""> <li data-v-56ac478c="">赔偿标准：是否保价由寄件人自愿选择，贵重物品建议选择保价，保价费最低为1元。</li><br data-v-56ac478c=""> <ol data-v-56ac478c=""><li data-v-56ac478c="">未保价的快件，丢失、毁坏、损少，物品最高赔偿不超过300元/票，另有约定的按照约定办理；</li><br data-v-56ac478c=""> <li data-v-56ac478c="">文件最高不超过100元/票，如核销单、提单等重要文件按（3）条规定保价付费和赔偿；</li><br data-v-56ac478c=""> <li data-v-56ac478c="">寄件人确认交寄的快件单票价值不超过三万元人民币。价值在1000元（含）以内，保价费为1元；价值1000元至2000元（含），保价费为2元；价值在2000元至1万元（含），保价费为保价金额的3‰；价值在1万元至3万元（含），保价费为保价金额的5‰。如快件丢失、损毁、短少的，按实际损失价值赔偿，但最高不超过快件的保价金额；</li><br data-v-56ac478c=""> <li data-v-56ac478c="">寄件人应选择足额保价方式，防范保价快件在运输过程中产生的风险：a.寄件人未足额投保，按货物实际损失比例（声明价值/实际价值*实际损失）赔偿，最高不超过保价金额；b.寄件人超额投保，按货物实际损失价值赔偿。</li><br data-v-56ac478c=""></ol> <li data-v-56ac478c="">本协议所称快件的“价值”，是指快件本身物理性质所具备的的价；所谓“损失”，不包括其可能获得的收益、利润、实际用途、商业机会、商业价值等任何直接或间接损失。</li><br data-v-56ac478c=""> <li data-v-56ac478c="">免责事由从法律、法规规定。未尽事宜可由协议双方另行商定，在本详情单正面“备注”栏内注明。</li><br data-v-56ac478c=""></ol>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">我知道了呢</button>
            </div>
        </div>
    </div>
</div>

<!-- 消息通知成功后的轻量弹窗 -->


<div th:replace="~{/logistics/footer::html}"></div>
<script src="/static/logistics/js/city-picker.data.js"></script>
<script src="/static/logistics/js/city-picker.js"></script>
<script src="/static/logistics/js/main.js"></script>
<script src="/static/logistics/js/bootstrap4.5.js"></script>
<script src="/static/logistics/js/vue.js"></script>
<script src="/static/logistics/js/axios.min.js"></script>
<script src="/static/logistics/home/js/home.js"></script>
<script src="/static/logistics/js/toast.js"></script>
<script>

</script>
</body>
</html>
